<template>
    <div id="login">
        <el-container>
            <el-header>
                <h3>UNI-ADMIN</h3>
            </el-header>
            <el-main>
                <div class="username">
                    <el-input placeholder="请输入用户名" v-model="username" @blur="unameBlur"></el-input>
                    <div class="infor-error" v-if="usernameError">请输入用户名</div>
                </div>
                <div class="password">
                    <el-input placeholder="请输入密码" v-model="password" show-password @blur='passwordBlur'></el-input>
                    <div class="infor-error" v-if="passwordError">请输入密码</div>
                </div>
                <el-button type="primary" @click="login">立即登录</el-button>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { apiLogin } from '@/common/api/index'
export default {
    data() {
        return {
            username: '',
            password: '',
            usernameError: false,
            passwordError: false
        }
    },
    // setup(){
    //     const router = useRouter()
    //     // router.push('/')
    // },

    methods: {
        unameBlur() {
            if (this.username == '') {
                this.usernameError = true
            } else {
                this.usernameError = false
            }
        },
        passwordBlur() {
            if (this.password == '') {
                this.passwordError = true
            } else {
                this.passwordError = false
            }
        },
        login() {
            if (this.password && this.username) {
                apiLogin({ username: this.username, password: this.password }).then((res) => {
                    console.log(res);
                    if (res.data.msg == 'ok') {
                        // 存token
                        this.$store.commit('setToken', res.data.data.token)
                        this.$store.commit('setTree', res.data.data.tree)
                        // 跳转到首页
                        this.$router.push('/index')
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        }
    },
    mounted() {

    },
}
</script>

<style scoped>
#login {
    width: 444px;
    height: 284px;
    margin: auto;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
    margin-top: 100px;
}

.el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: .75rem 1.25rem;
}

.el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
}

body>.el-container {
    /* margin-bottom: 40px; */
    height: 186px;
}

/* .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
} */

.el-header h3 {
    color: #6c757d;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.password,
.username {
    position: relative;
    margin-bottom: 22px;
}

.infor-error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
}

.el-button {
    width: 100%;
    background: #399;
}

.input-error {
    border: 1px solid red;
}
</style>